<template>
  <div>
    <div class="user-wrap" v-if="!isAuth">
      <div>
        <text class="u-font-xl font-bold">未登陆</text>
        <text class="u-font-sm u-content-color">点击头像登陆</text>
      </div>
      <div>
        <button
          class="avatar"
          open-type="getUserInfo"
          @getuserinfo="$_getUserInfo"
        ></button>
      </div>
    </div>
    <div class="user-wrap" v-else>
      <div>
        <text class="u-font-xl font-bold">{{ userInfo.nickname }}</text>
        <text class="u-font-sm u-content-color">
          {{ userInfo.created_at | parseTime("{y}-{m}-{d}") }}</text
        >
      </div>
      <div @click="onRefreshInfo">
        <image :src="userInfo.avatar" class="avatar"></image>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex"

export default {
  computed: {
    ...mapGetters("user", ["isAuth", "userInfo"]),
  },
  methods: {
    ...mapActions("user", ["authUserInfo", "getUserInfo"]),

    // 获取用户信息
    $_getUserInfo(e) {
      this.authUserInfo(e)
    },

    onRefreshInfo() {
      uni.showLoading({ title: "刷新用户数据~" })
      this.getUserInfo()
      setTimeout(() => {
        uni.showToast({
          title: "刷新成功!",
        })
      }, 1500)
    },
  },
}
</script>

<style lang="scss" scoped>
.user-wrap {
  display: flex;

  margin-top: 50rpx;

  justify-content: space-between;
  text {
    display: block;
  }
  .avatar {
    border-radius: 50px;
    width: 100rpx;
    height: 100rpx;

    background: url(https://656e-env-used-1258356576.tcb.qcloud.la/v2/home/avatar.png?sign=4852b024785368aaf4869a1f0b11bda7&t=1603765956);
    background-repeat: no-repeat;
    background-size: 100% 100%;

    box-shadow: 6px 6px 12px #c2c2c6, -6px -6px 12px #ffffff;
  }
}
</style>
